import React from 'react';
import { Animated, Pressable, StyleProp, StyleSheet, Text, TextStyle, ViewStyle } from 'react-native';
import { Shadow, ShadowProps } from 'react-native-shadow-2';

import usePress from '@hooks/usePress';
import { pxToVh, pxToVw } from '@utils/pxToVx';
import LottieView from 'lottie-react-native';

interface CommonButtonProps {
  text: React.ReactNode;
  onPress?: () => void;
  wrapperStyle?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  disabled?: boolean;
  loading?: boolean;
  loadingComponent?: React.ReactNode;
  icon?: React.ReactNode;
  iconPosition?: 'start' | 'end';
  shadowProps?: ShadowProps;
}

/**
 * CommonButton
 * @param text
 * @param onPress
 * @param wrapperStyle
 * @param textStyle
 * @constructor
 */
const CommonButton: React.FC<CommonButtonProps> = ({
  text,
  onPress,
  wrapperStyle,
  textStyle,
  disabled = false,
  loading = false,
  loadingComponent,
  icon = null,
  iconPosition = 'start',
  shadowProps,
}) => {
  const { handlePressIn, handlePressOut, scaleValue } = usePress();

  return (
    <Pressable disabled={disabled} onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={onPress}>
      <Animated.View
        style={{
          transform: [{ scale: scaleValue }],
        }}
      >
        <Shadow disabled {...shadowProps} style={[styles.container, wrapperStyle, disabled ? styles.disabled : null]}>
          {iconPosition === 'start' && icon}
          {loading ? (
            <>
              {loadingComponent ?? (
                <LottieView
                  source={require('@assets/animation/uploadLoading.json')}
                  style={styles.animation}
                  autoPlay
                  loop
                />
              )}
            </>
          ) : (
            <Text style={[styles.text, textStyle]}>{text}</Text>
          )}
          {iconPosition === 'end' && icon}
        </Shadow>
      </Animated.View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#000',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: pxToVw(24),
    paddingVertical: pxToVw(10),
    borderRadius: pxToVw(12),
    columnGap: pxToVw(10),
  },
  text: {
    fontSize: pxToVh(16),
    lineHeight: pxToVh(20),
    fontWeight: '600',
    color: '#fff',
  },
  animation: {
    width: '100%',
    height: '100%',
  },
  disabled: {
    opacity: 0.5,
  },
});

export default CommonButton;
